<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>

<style lang="scss" scoped>
$size: 48px;
$gap: 4px;
.button-group {
  @apply grid grid-cols-2 w-max;
  @apply transition-all duration-300;
  @apply rounded-lg shadow overflow-hidden;
  &:hover {
    margin: -$gap;
    @apply rounded-none shadow-none;
    .button-group-item {
      margin: $gap;
      height: calc($size - $gap);
      width: calc($size - $gap);
      @apply rounded-lg shadow;
    }
  }

  &-item {
    height: $size;
    width: $size;
    @apply bg-gray-50;
    @apply transition-all duration-300  cursor-pointer flex;
    &:hover {
      @apply bg-gray-100;
    }
  }
}
</style>

<template>
  <div class="w-max">
    <Swiper v-bind="swiperOptions" class="h-[30rem] w-[40rem] !m-[unset] shadow">
      <SwiperSlide class="!flex">
        <loader-bat class="m-auto" />
      </SwiperSlide>
      <SwiperSlide class="!flex">
        <loader-flowers class="m-auto" />
      </SwiperSlide>
      <SwiperSlide class="!flex">
        <loader-1 class="m-auto" />
      </SwiperSlide>
      <SwiperSlide class="!flex">
        <loader-butterfly class="m-auto" />
      </SwiperSlide>

      <div class="button-group absolute right-2 bottom-2 z-10">
        <div
          v-for="item in 4"
          class="button-group-item"
          :class="{
            '!bg-gray-200': contentActive === item - 1,
          }"
          @click="to(item - 1)"
        ></div>
      </div>
    </Swiper>
  </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectCoverflow } from 'swiper'

const { contentActive, swiperOptions, to } = useContentSwiper({
  modules: [EffectCoverflow],
  effect: 'coverflow',
})
</script>
